<?

require('SLLists.class.php');
$sortableLists = new SLLists('scriptaculous');	// points to path of scriptaculous JS files
$conn = mysql_connect('localhost', 'root', '');
mysql_select_db('mightmedia');

// information about the database fields and table
$dbTable = 'panel';		// the database table
$idField = 'id';				// the numeric primary key
$displayField = 'panel';		// the field whose text will be shown
$orderField = 'place';		// the field that will hold the sort order for the row


// formatting for the list - using a ul as a container and li tags for list items
$sortableTag = 'li';			// the type of tag that should be sortable
$listFormat = '<ul id="sortableList">%s </ul>';	// argument is the contents of the list
$listItemFormat = '<li id="item_%s">%s <a href="edit_%s" align="right">edit</a></li>';  // two arguments are the idField and the displayField

$sortableLists->addList('sortableList','sortableListOrder',$sortableTag);
$sortableLists->debug = false;

if (isset($_POST['sortableListsSubmitted'])) {
	$orderArray = SLLists::getOrderArray($_POST['sortableListOrder'],'sortableList');
	foreach($orderArray as $item) {
		$sql = "UPDATE $dbTable set $orderField=".$item['order']." WHERE $idField=".$item['element'];
		mysql_query($sql);
	}
}

$sql = "SELECT $idField, $displayField, $orderField from $dbTable order by $orderField";
$recordSet = mysql_query($sql);
$listArray = array();
while ($record = mysql_fetch_assoc($recordSet)) {
	$listArray[] = sprintf($listItemFormat,$record[$idField],$record[$displayField],$record[$idField]);
}
mysql_free_result($recordSet);
$listHTML = implode("\n",$listArray);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Test DB Example for Sortable Lists</title>
	<?
	$sortableLists->printTopJS();
	?>
<style>
body,div,li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
ul#sortableList {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	width: 200px;
}
ul#sortableList li {
	cursor: move;
	padding: 2px 2px;
	margin: 2px 0px;
	border: 1px solid #000000;
	background-color: #ECF2F2;
}
div#sortableList div {
	cursor: move;
	padding: 2px 2px;
	margin: 2px 0px;
	border: 1px solid #000000;
	background-color: #ECF2F2;
	width: 300px;
}
div#sortableList img {
	cursor: move;
	display: block;
	margin: 5px 0px;
	border: 1px solid #000000;
}
</style>
</head>

<body>
Drag and drop to change the order of the following items then click 'Save' to save the new order:<br><br>
<?
printf($listFormat, $listHTML);
$sortableLists->printForm($_SERVER['PHP_SELF'], 'POST', 'Save', 'button');
$sortableLists->printBottomJS();
?>